<template>
  <el-dialog :title="dialogObj[dialogTitle]" :close-on-click-modal="false" :close-on-press-escape="false"
    :visible.sync="dialogVisible" width="30%">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="节点名称" prop="nodeName">
        <el-input v-model="ruleForm.nodeName"></el-input>
      </el-form-item>
      <el-form-item label="IP地址" prop="nodeIp">
        <el-input v-model="ruleForm.nodeIp" :disabled="isbisabled"></el-input>
      </el-form-item>
      <el-form-item label="端口" prop="nodePort">
        <el-input v-model="ruleForm.nodePort" :disabled="isbisabled"></el-input>
      </el-form-item>

      <el-form-item label="说明" prop="description">
        <el-input v-model="ruleForm.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="offdialogVisible('取消')">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="apilick">测试连通性</el-button>
      <el-button type="primary" @click="dialogTitle == 'create' ? createbtn('ruleForm') : updatebtn('ruleForm')">确
        定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getupdate, getAdd, getlink } from '@/api/resourceManagement/lookview.js'
export default {
  data() {
    return {
      loading: false,
      isbisabled: false,
      dialogVisible: true,
      dialogObj: {
        create: '新增',
        update: '编辑',
      },
      dialogTitle: 'create',
      ruleForm: {},
      rules: {
        nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
        nodeIp: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
        nodePort: [{ required: true, message: '请输入端口', trigger: 'blur' }],
      },
    }
  },

  methods: {
    createdialogFun() {
      this.dialogTitle = 'create'
    },
    updatedialogFun(item) {
      this.isbisabled = true
      this.ruleForm = item
      this.dialogTitle = 'update'
    },
    offdialogVisible(item) {
      this.$emit('offdialogVisible', item)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    apilick() {
      this.loading = true
      getlink(this.ruleForm).then((res) => {
        if (res.data.code == 200) {
          this.loading = false
          this.$message.success(res.data.msg)
          this.rules = {
            nodeName: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
            nodeIp: [{ required: true, message: '请输入IP地址', trigger: 'blur' }],
            nodePort: [{ required: true, message: '请输入端口', trigger: 'blur' }],
          }
        } else {
          this.$message.error(res.data.data)
          this.loading = false
        }
      }).catch(err => {
        this.$message.error("检测连通性失败-请检查参数")
      })
    },
    createbtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getAdd(this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.offdialogVisible('确定')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updatebtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          getupdate(this.ruleForm).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg)
              this.offdialogVisible('确定')
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
  },
}
</script>
<style></style>
